<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <a href="#/home">首页</a>
        </li>
        <li>
            <a href="#/about">关于</a>
        </li>
    </ul>
    <div id="root">
        
    </div>
    <script>
        const routes =[
            {
                path:'/home',
            component:()=>{
                return '<h1>首页</h1>'
            },
            },
            {
                path:'/about',
            component:()=>{
                return '<h1>关于</h1>'
            }
            }
        ]
            
        //监听hash值的变化
        window.addEventListener('hashchange',()=>{
            render()
        }) 
        //根据hash值渲染组件
        function render(){
            const hash = location.hash
            const component = routes.find(item=>('#'+item.path) === hash)
            if(component){
                document.getElementById('root').innerHTML = component.component()
            }
        }
        window.addEventListener('DOMContentLoaded',()=>{
            render()
        })
    </script>
</body>
</html>